<template>
  <div
    class="echarts-content"
    :id="props.id"
  ></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { nextTick, onMounted, ref, watch, defineEmits } from 'vue'
let chart: any = null
// 自适应窗口大小
window.addEventListener('resize', () => {
  chart.resize()
})
defineOptions({
  name: 'LineChart'
})
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
    default: () => ({})
  },
  style: {
    type: Object,
    default: () => ({
      lineColor: '',
      areaColor: []
    })
  }
})
watch(
  () => props.data,
  (val) => {
    drawChart()
  },
  {
    deep: true
  }
)
onMounted(async () => {
  nextTick(() => {
    drawChart()
  })
})
const drawChart = () => {
  let data = props.data
  let xData = data.map((item: any) => item.label)
  let yData = data.map((item: any) => item.value)
  let options = {
    title: {
      text: '单位：件',
      textStyle: {
        color: '#1D2129',
        fontSize: '14px',
        fontFamily: 'PingFangSC',
        bottom: 0
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: xData,
      min: 0,
      axisLabel: {
        // rotate: 45, // 旋转角度，正值顺时针旋转，单位是度
        // margin: '0 20' // 标签与轴线之间的距离
        // padding: [0, 0, 0, -40] //文字左右定位
        textStyle: {
          color: '#86909C',
          fontSize: '14px',
          fontFamily: 'PingFangSC'
        }
      },
      boundaryGap: false
    },
    yAxis: {
      //   name: '单位：件',
      //   nameTextStyle: {
      //     color: '#1D2129',
      //     fontSize: '14px',
      //     fontFamily: 'PingFangSC',
      //     bottom: 0
      //     // align: 'left'
      //   },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          // 分界线颜色
          color: '#C7CBD2'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#86909C',
          fontSize: '14px',
          fontFamily: 'PingFangSC'
        }
      }
    },
    grid: {
      left: '70px',
      top: '16%',
      bottom: '12%',
      right: '20px'
    },
    series: [
      {
        type: 'line',
        name: '数量',
        color: props.style.lineColor,
        symbolSize: 14,
        symbol: 'circle',
        showSymbol: false,
        data: yData,
        smooth: true,
        itemStyle: {
          shadowColor: '#ffffff',
          shadowBlur: 5
        },
        areaStyle: {
          normal: {
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: props.style.areaColor[0] // 0% 处的颜色
              },
              {
                offset: 1,
                color: props.style.areaColor[1] // 100% 处的颜色
              }
            ]) //背景渐变色
          }
        },
        lineStyle: {
          // 系列级个性化折线样式
          width: 2,
          type: 'solid',
          color: props.style.lineColor
        }
      }
    ]
  }
  //检测是否已经存在echarts实例，如果不存在，则不再去初始化
  chart = echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement)
  //如果为空 则正常进行渲染 反之 不再进行初始化
  if (chart == null) {
    chart = echarts.init(document.getElementById(props.id))
  }

  chart.setOption(options)
}
</script>

<style lang="scss" scoped>
.echarts-content {
  // width: 500px;
  height: 200px;
}
</style>
